import React, { useState } from 'react';

import IMG_THREE from '@/assets/imgs/bendishangshangchaung.png';
import IMG_FOUR from '@/assets/imgs/huiyipeizhi.png';
import IMG_TWO from '@/assets/imgs/rechiku.png';
import IMG_ONE from '@/assets/imgs/shizhuanlu.png';
import SvgIcon from '@/components/SvgIcon';

import AssistantTab from '../AssistantTab/index';
import ScoringTab1 from '../ScoringTab1/index';
import ScoringTab2 from '../ScoringTab2/index';
import SettingsTab from '../SettingsTab/index';
import SummaryTab from '../SummaryTab/index';
import TranscriptionTab from '../TranscriptionTab/index';
import VideoRecommendationTab from '../VideoRecommendationTab/index';

interface Message {
	role: string;
	content: string;
}

interface MainContentProps {
	activeTab: string;
	onTabChange: (tab: string) => void;
	onTypeChange: (type: number) => void;
	infoList: string;
	displayedText: string;
	resultObj: any;
	messages: Message[];
	onMessagesChange: (messages: Message[]) => void;
	onAudioResult: (result: string) => void;
	// 视频推荐状态
	videoRecommendationState: {
		extractedTags: string[];
		matchedVideos: any[];
		isLoading: boolean;
		transcriptionText: string;
		audioState?: {
			fileList: File[];
			recordFile: Blob | null;
			playInfo: {
				localPlay: boolean;
				currentTime: number;
				duration: number;
			};
		};
	};
	onVideoRecommendationStateChange: (state: any) => void;
}

const TypeList = [
	{
		title: '开启实时转录',
		img: IMG_ONE,
		type: 2
	},
	{
		title: '热词库',
		img: IMG_TWO,
		type: 3
	},
	{
		title: '本地音频/纪要上传',
		img: IMG_THREE,
		type: 4
	},
	{
		title: '会议信息配置',
		img: IMG_FOUR,
		type: 5
	}
];

const MainContent: React.FC<MainContentProps> = ({
	activeTab,
	onTabChange,
	onTypeChange,
	infoList,
	displayedText,
	resultObj,
	messages,
	onMessagesChange,
	onAudioResult,
	videoRecommendationState,
	onVideoRecommendationStateChange
}) => {
	// 添加子tab状态管理
	const [activeSubTab, setActiveSubTab] = useState('assistant-main');

	const renderWelcomeScreen = () => (
		<div className="w-full h-full">
			<div className="w-full color-[#333] text-6 home-bs py-6 px-8">
				<span>中移物联网AI会议助手</span>
			</div>
			<div className="pt-22 text-4 pl-8 color-[#333] text-8">您好，我是您的 AI会议助手</div>
			<div className="grid grid-cols-2 gap-4 p-8 pt-16">
				{TypeList.map((item, index) => {
					return (
						<div
							onClick={() => onTypeChange(item.type)}
							key={index}
							className="bg-#EDF6FF rounded-2xl h-40 w-full flex items-center justify-between cursor-pointer px-8"
						>
							<div className="color-[#56585B] text-7.5">{item.title}</div>
							<img alt={item.title} src={item.img} className="h-27.5 w-27.5" />
						</div>
					);
				})}
			</div>
		</div>
	);

	const renderTabContent = () => {
		switch (activeTab) {
			case 'transcribe':
				return (
					<TranscriptionTab
						infoList={infoList}
						displayedText={displayedText}
						onAudioResult={onAudioResult}
					/>
				);
			case 'summary':
				return <SummaryTab resultObj={resultObj} />;
			case 'settings':
				return <SettingsTab onTypeChange={onTypeChange} />;
			case 'video-recommendation':
				return (
					<VideoRecommendationTab
						infoList={infoList}
						displayedText={displayedText}
						onAudioResult={onAudioResult}
						extractedTags={videoRecommendationState.extractedTags}
						matchedVideos={videoRecommendationState.matchedVideos}
						isLoading={videoRecommendationState.isLoading}
						transcriptionText={videoRecommendationState.transcriptionText}
						audioState={videoRecommendationState.audioState}
						onStateChange={onVideoRecommendationStateChange}
					/>
				);
			case 'assistant':
				// 修改AI小助手的渲染逻辑，包含子tab
				return (
					<div className="flex flex-col h-full">
						{/* AI小助手子tab导航 */}
						<div className="flex border-b border-gray-200 px-8 py-2">
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeSubTab === 'assistant-main'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => setActiveSubTab('assistant-main')}
							>
								AI助手
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeSubTab === 'scoring1'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => setActiveSubTab('scoring1')}
							>
								内容质量评分
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeSubTab === 'scoring2'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => setActiveSubTab('scoring2')}
							>
								沟通表现评分
							</div>
						</div>
						{/* AI小助手子tab内容 */}
						<div className="flex-1 overflow-auto">
							{activeSubTab === 'assistant-main' && (
								<AssistantTab messages={messages} onMessagesChange={onMessagesChange} />
							)}
							{activeSubTab === 'scoring1' && <ScoringTab1 infoList={infoList} />}
							{activeSubTab === 'scoring2' && <ScoringTab2 infoList={infoList} />}
						</div>
					</div>
				);
			default:
				return renderWelcomeScreen();
		}
	};

	const shouldShowTabs = activeTab !== 'welcome';

	return (
		<div className="bg-white rounded-2xl shadow-lg h-full">
			{!shouldShowTabs ? (
				renderWelcomeScreen()
			) : (
				<div className="w-full h-full flex-col">
					{/* 标签页头部 */}
					<div className="w-full color-[#333] text-6 home-bs py-6 px-8 relative">
						<span>AI助手Pro</span>
						<div className="flex mt-2 border-b border-gray-200">
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeTab === 'transcribe'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => onTabChange('transcribe')}
							>
								转写
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeTab === 'summary'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => onTabChange('summary')}
							>
								纪要
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeTab === 'video-recommendation'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => onTabChange('video-recommendation')}
							>
								视频推荐助手
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeTab === 'settings'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => onTabChange('settings')}
							>
								设置
							</div>
							<div
								className={`px-4 py-2 cursor-pointer ${
									activeTab === 'assistant'
										? 'text-blue-500 border-b-2 border-blue-500'
										: 'text-gray-500'
								}`}
								onClick={() => onTabChange('assistant')}
							>
								AI小助手
							</div>
						</div>
						<SvgIcon
							className="absolute top-4 right-4 cursor-pointer color-[#6D7689]"
							onClick={() => onTabChange('welcome')}
							localIcon="icon-close"
						/>
					</div>

					{/* 标签页内容 */}
					{renderTabContent()}
				</div>
			)}
		</div>
	);
};

export default MainContent;
